<template>
	<view class="roombody">
			<view class="mask" @click="close()"  @touchmove.stop.prevent></view>
			<view class="room-body">
				<view class="room-head">
					<text>购票须知</text>
					<image src="/static/close.png" class="close" @click="close()" mode=""></image>
				</view>
				<view class="room-area" >
					<view class="sm-list">
						<view class="sm-item" v-for="(item,index) in smData" :key='index' >
							<view class="list-title">
								<text class='shu'></text>
								<text>{{item.name}}</text>
							</view>
							<!-- <text class="sm-top">(此编辑内容仅用来展示)</text> -->
							<view class="sm-text">
								<view class="text-item" v-for="(text,index) in item.data" :key='index'  >
									<view style="width: 100%;height: auto;display: table;">
										<view class="item-dot"></view>
										<text>{{text}}</text>
									</view>
									
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
	</view>
</template>

<script>
	export default{
		props: {
			yanyiConf: {
				type: Object,
				default: function(){
					return {
						xuzhi:true,
						buy:false,
					}
				}
			},
		},
		data(){
			return{
				showMoreSm:false,
				showSmNum:2,
				current: 0,
				
				smData:[
					{
						name:'预定说明',
						data:[
							'每单最多购买6张',
							'1米以上儿童需购买全价票入场',
						]
					},
					{
						name:'温馨提示',
						data:[
							'开场前 10分钟 凭手机号入场',
							'提前3小时退',
							'每单最多购买6张',
							'1米以上儿童需购买全价票入场',
							'每单最多购买6张',
							'1米以上儿童需购买全价票入场'
						]
					},
				],
				
			}
		},
		methods:{
			close(){
				//#ifdef APP-PLUS|| MP-WEIXIN
				this.$parent.closeNk()
				//#endif
				//#ifndef APP-PLUS|| MP-WEIXIN
				this.$parent.$parent.closeNk()
				//#endif
			},
			change(e) {
				this.current = e.detail.current;
				console.log(this.current)
			},
			
		},
		created() {
			if(this.yanyiConf.buy==true){
				// this.showMoreSm = true
			}else if(this.yanyiConf.xz==false){
				// this.showMoreSm = false
			}
			
		}
	}
</script>

<style scoped>
	.roombody{
		width: 750upx;
		height: 100vh;
		position: fixed;
		top: 0;
		z-index: 22;
		left: 0;
	}
	/* swiper */
	.mask{
		width: 750upx;
		height:calc(100vh - 98upx);
		position: absolute;
		background: rgba(0,0,0,0.3);
	}
	
	
	
	/* body */
	
	.room-body{
		width: 750upx;
		padding-top: 30upx;
		border-radius: 40upx 40upx 0 0;
		height: 800upx;
		background: #ffffff;
		position: absolute;
		bottom: 98upx;
		z-index: 99;
		overflow:hidden;
		
		box-shadow:0px -1px 6px #2f2f2f
	}
	.room-body::-webkit-scrollbar {
        display: none;/*隐藏滚动条*/
    }
	.room-area{
		width: 100%;
		height: calc(800upx - 60upx);
		
		overflow: scroll;
	}
	.room-head{
		width: 750upx;
		height: 60upx;
	}
	.room-head text{
		font-size: 36upx;
		margin-left: 43upx;
		float: left;
		line-height: 60upx;
		font-weight: bold;
	}
	.room-head image{
		width: 28upx;
		min-width: 20px;
		height: 28upx;
		min-height: 20px;
		padding: 20upx;
		margin-top: -10upx;
		margin-right: 10upx;
		float: right;
	}
	.room-photos{
		width: 750upx;
		height: 400upx;
		margin-top: 50upx;
	}
	.room-info{
		width: 750upx;
		height:  150upx;
		margin-top: 30upx;
	}
	.room-name{
		margin-left: 33upx;
		font-size: 36upx;
		font-weight: bold;
	}
	.room-tips{
		width: 688upx;
		height: 100upx;
		margin-left: 31upx;
		margin-top: 20upx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	
	.room-tips-item{
		width: 33%;
		font-size: 24upx;
		float: left;
		line-height: 50upx;
		color: #666666;
	}
	.room-tips-item image{
		width: 20upx;
		margin-top: 15upx;
		height: 20upx;
		margin-right: 20upx;
		float: left;
	}
	.sm-list{
		width: 750upx;
		height: auto;
	}
	.sm-item{
		margin-top: 30upx;
		width: 750upx;
		height: auto;
		display: table;
	}
	.sm-item text{
		float: left;
		margin-left: 13upx;
	}
	.item-dot{
		width: 6upx;
		height: 6upx;
		background: rgba(242,135,40,1.00);
		border-radius: 50%;
		margin-left: 90upx;
		margin-top: 30upx;
		float: left;
	}
	.sm-text{
		width: 671upx;
		margin-left: 39upx;
	}
	.text-item{
		font-size: 28upx;
		color: #666666;
		line-height: 60upx;
	}
	.sm-top{
		font-size: 28upx;
		margin-left: 39upx;
		color: #666666;
		margin-top: 40upx;
	}
	
	
	.list-title{
		width: 93.4%;
		margin-left: auto;
		margin-right: auto;
		height: 58.4upx;
		margin-top:20upx;
	}
	.list-title text{
		font-size: 28upx;
		font-weight: bolder;
	}
	.shu{
		width: 0.7%;
		height: 3.06vw;
		background: #55A0FF;
		float: left;
		margin-top: 2.3vw;
		margin-right: 10px;
	}
	.yuding-box{
		width: 750upx;
		margin-top: 40upx;
		height: 98upx;
		box-shadow:0px -1px 3px #dcdada
	}
	.yuding{
		width: 240upx;
		height: 98upx;
		float: right;
		color: #FFFFFF;
		text-align: center;
		font-size: 36upx;
		border: none;
		border-radius: 0;
		line-height: 98upx;
		background: -webkit-linear-gradient(top, #54B0FF,#577AFF);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(top, #54B0FF,#577AFF);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(top, #54B0FF,#577AFF);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to bottom, #54B0FF,#577AFF);
		/* 标准的语法 */
	}
	.price{
		font-size: 40upx;
		color: #E25115;
		margin-left: 46upx;
		line-height: 98upx;
	}
	.more-sm{
		width: 750upx;
		margin-top: 50upx;
		display: flex;
		flex-direction: row;
		margin-bottom: 30upx;
		justify-content:center;
	}
	.more-sm text{
		color: #54B0FF;
		font-size: 30upx;
	}
	.more-sm image{
		padding-top: 10upx;
		margin-left: 20upx;
		width: 23px;
		height: 14px;
	}
	.shouqi{
		transform:rotate(180deg);
	}
</style>
